<template>
  <div class="footer" :class="{ 'light-theme': $store.state.theme === 'light' }">
    <!-- 上半部分 -->
    <div class="footer-top">
      <!-- 特色服务区域 -->
      <div class="service-features">
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="shipping" size="40" />
          </div>
          <span class="feature-desc">多倉發貨</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="card" size="40" />
          </div>
          <span class="feature-desc">快捷支付</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="return" size="40" />
          </div>
          <span class="feature-desc">急速退換</span>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <TheIcon icon="time-24" size="40" />
          </div>
          <span class="feature-desc">人工客服</span>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="footer-bottom">
      <!-- 主要内容区域 -->
      <div class="footer-main">
        <!-- 導航欄 -->
        <div class="footer-nav">
          <ul class="nav-links">
            <li><nuxt-link to="/about_us" @click.native="scrollToTop">關於我們</nuxt-link></li>
            <li><nuxt-link :to="{ path: '/news_detail', query: { id: 1 } }" @click.native="scrollToTop">售後政策</nuxt-link>
            </li>
            <li><nuxt-link :to="{ path: '/news_detail', query: { id: 2 } }" @click.native="scrollToTop">物流政策</nuxt-link>
            </li>
            <li><nuxt-link :to="{ path: '/news_detail', query: { id: 3 } }" @click.native="scrollToTop">隱私政策</nuxt-link>
            </li>
          </ul>
        </div>
      </div>
      <!-- 底部版权信息 -->
      <div class="footer-copyright">
        <div class="copyright">
          <span>
            &copy; 2025 家具商城. All rights reserved.
          </span>
        </div>
        <div class="social-icons">
          <a href="#" class="social-icon">
            <i class="iconfont icon-facebook"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-tuite"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-instagram"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-linkedin"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="iconfont icon-whatsapp"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TheIcon from "@/components/TheIcon";
export default {
  name: "footers",
  components: {
    TheIcon
  },
  data() {
    return {
      codeUrl: "",
      iScode: false
    };
  },
  head() {
    return {
      meta: [
      ]
    };
  },
  created() {
  },
  mounted() { },
  methods: {
    scrollToTop() {
      // 強制滾動到頁面頂部
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
  }
};
</script>

<style scoped lang="scss">
@import '~/assets/iconfont/iconfont.css';

.footer {
  width: 100%;
  background-color: #0f0f0f;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  letter-spacing: 1px;

  // 上半部分
  .footer-top {
    position: relative;
    flex: 0 0 25vh;
    background: $primary-base;

    .service-features {
      max-width: 1200px;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      bottom: 12%;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 90%;
      z-index: 2;

      .feature-item {
        text-align: center;
        color: $text-white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        min-height: 180px;

        .feature-desc {
          font-size: 14px;
          line-height: 1.4;
          color: rgba(255, 255, 255, 0.9);
          position: relative;
          z-index: 1;
          margin-bottom: 4px;
          font-weight: 500;

          &:first-of-type {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
          }
        }

        .feature-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 72px;
          height: 72px;
          border-radius: 50%;
          margin: 0 auto 10px;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          z-index: 1;

          svg {
            width: 36px;
            height: 36px;
            stroke: var(--text-white);
            stroke-width: 2;
          }
        }


        .feature-icon:hover {
          transform: scale(1.02);
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 50%;

          svg {
            stroke: var(--primary-base);
          }
        }

      }
    }
  }

  // 下半部分
  .footer-bottom {
    color: $text-white;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px 0;

    // 主要内容区域
    .footer-main {
      padding: 0 min(100px, 8vw);
      width: 100%;

      // 導航欄樣式
      .footer-nav {
        display: flex;
        align-items: center;
        margin: 20px 0;

        .nav-links {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 30px;

          li {
            a {
              color: rgba(255, 255, 255, 0.7);
              font-size: 14px;
              transition: all 0.3s ease;
              position: relative;

              &:hover {
                color: $primary-base;
              }

              &:after {
                content: '';
                position: absolute;
                bottom: -4px;
                left: 0;
                width: 0;
                height: 1px;
                background-color: $primary-base;
                transition: width 0.3s ease;
              }

              &:hover:after {
                width: 100%;
              }
            }
          }

          @media (max-width: 768px) {
            flex-direction: column;
            gap: 15px;
          }
        }
      }

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 40px;
      }
    }
  }

  .footer-copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 0 min(100px, 8vw);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: min(100px, 8vw);
      right: min(100px, 8vw);
      height: 1px;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .copyright {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
    }

    .social-icons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 15px;

      .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transition: all 0.3s ease;
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          background: $primary-base;
          color: #ffffff;
          transform: translateY(-2px);
        }

        .iconfont {
          font-size: 14px;
        }
      }
    }
  }
}



.footer {
  &.light-theme {
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;

    .footer-top {
      background: var(--primary-base);

      .feature-desc {
        color: var(--vip-text) !important;
      }
    }

    .footer-bottom {
      color: var(--text-primary);
      background-color: #fff;

      .footer-nav {
        .nav-links {
          li {
            a {
              color: rgba(40, 40, 40, 0.8);

              &:hover {
                color: var(--primary-base);
              }
            }
          }
        }
      }
    }

    .footer-copyright {
      &::before {
        background-color: rgba(40, 40, 40, 0.2);
      }

      .copyright {

        span {
          color: var(--text-primary);
        }

      }

      .social-icons {
        .social-icon {
          background: rgba(0, 0, 0, 0.2);
          color: var(--text-white);

          &:hover {
            background: var(--primary-base);
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
